package myapp.view 
{
	import myapp.events.AppEvent;

	import com.bumpslide.data.type.Padding;
	import com.bumpslide.events.UIEvent;
	import com.bumpslide.ui.Grid;
	import com.bumpslide.ui.TextBox;

	import flash.text.TextFormat;

	/**
	 * @author David Knape
	 */
	public class ThumbnailPanel extends AppComponent
	{
		
		private var grid:Grid;
		private var titleBox:TextBox;

		
		override protected function addChildren():void
		{
			super.addChildren();
			
			// add children
			grid = new Grid(CustomThumbnailItem, 85, 85);
			grid.spacing = 10;
			grid.padding = new Padding( 40, 10, 10, 10 );
			
			with(grid.backgroundBox) {
				color = 0xeeeeee;
				alpha = 1;
				borderColor = 0xaaaaaa;
				borderWidth = 0;
				borderPixelHinting = true;
			}
			
			titleBox = new TextBox( "", new TextFormat( 'Arial', 16, 0x333333, true ) );
			titleBox.move( 10, 10 );
			grid.addChild( titleBox );
			
			addChild( grid );
									
			// init bindings
			model.bind('images', grid, 'dataProvider');
			model.bind('titleHtml', titleBox, 'htmlText');
			
			// listen for UI events...
			addEventListener(Grid.EVENT_ITEM_CLICK, handleThumbnailClick);
		}
		
		
		private function handleThumbnailClick(event:UIEvent):void
		{
			AppEvent.send(AppEvent.SELECT_IMAGE, event.data);
		}

		
		override protected function draw():void
		{
			grid.setSize( width, height );
			super.draw();
		}
	}
}
